<template>
	<view class="content-container">
		<view class="left">
			
			<view class="conten">
				<view class="title">
					{{mendianitem.name}}
				</view>
				<view class="text">
					<!-- 52分送达 | 已售109 -->
					距离你{{getRoundedNumber(mendianitem.distance)}}
				</view>
			</view>
		</view>
		<view class="right">
			<view class="" @click="togglePopup('bottom')">
				切换门店
			</view>
			
		</view>

	
	</view>

</template>

<script>
	export default {
		name: "dp-mendian",
		props:{
			mendianitem:{}
		},
		data() {
			return {
				// type: 'center',
			};
		},
		methods: {
			// 过滤向上取整
			getRoundedNumber(value) {
			// 确保值为数字
			    value = parseFloat(value);
			    
			    // 将值转换为以km为单位的字符串，并保留一位小数
			    return (value / 1000).toFixed(1) + ' km';
			},
			 togglePopup(type) {
				 // this.type=type
			      this.$emit('toggle-popup', type);
			    }
		}
	}
</script>

<style lang="less">
	.content-container {
		display: flex;
		justify-content: space-between;
		padding: 10upx 10upx;
		// border-bottom: 1upx solid #eee;
		background-color: #fff;
		align-items: center;

		.left {
		


			.conten {
				.title {
					font-size: 35upx;
					// font-weight: 700;
					color: #000;
				}

				.text {
					margin-top: 10upx;
					font-size: 26upx;
					color: #888;
				}
			}
		}

		.right {
			font-size: 25upx;
			background-color: #eee;
			border-bottom-left-radius: 25upx;
			border-top-left-radius: 25upx;
			padding: 8upx 15upx;
			

			image {
				margin-left: 10upx;
				width: 18upx;
				height: 18upx;
			}
		}
	}
</style>